<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="/css/user.css"/>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>

<div id="app">
        <table class="altrowstable" id="alternatecolor">
            <tr>
                <th>用户编号</th>
                <th>用户名</th>
                <th>真实姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>删除操作</th>
            </tr>

        <tr v-for="user in userlist">
            <td>{{user.id}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.birthday}}</td>
            <td><button>删除</button></td>
        </tr>
    </table>

     <div align="left">
         <!-- background  背景色
         @current-change="currentChange"    页码发生变化  触发 urrent-change 事件
         current-page  当前页码
         page-size  每页显示记录数
         total  总记录数
         -->
         <el-pagination
                 background
                 @current-change="currentChange"
                 :current-page="pagination.currentPage"
                 :page-size="pagination.pageSize"
                 layout="prev, pager, next,jumper"
                 :total="pagination.total">
         </el-pagination>
     </div>

</div>

  <script>
         var  vue = new Vue({
             el:"#app",
             data:{
                 userlist:[],
                 //   定义分页对象 封装分页数据
                 pagination:{
                     currentPage:1,
                     pageSize:2,
                     total:null
                 }

             },
             created(){
                  //  立刻发送ajax  查询用户数据  无分页查询
                 // axios.get("/user/findAll.do").then((res)=>{
                 //     console.info(res)
                 //     this.userlist = res.data
                 // })
                //  第一次分页查询
                 this.pageQuery();

             },
             methods:{
                 //  分页查询实现
                 currentChange(curpage){
                     this.pagination.currentPage=curpage
                    this.pageQuery();
                 },


                 pageQuery(){
                     axios.get("/user/pageQuery.do?pageNum="
                         +this.pagination.currentPage+"&pageSize="
                         +this.pagination.pageSize).then((res)=>{
                       //  res    List<T>   total   res.data  = Map
                       //    map.put("userlist",List<T>)
                       //    map.put("total",6)
                         this.userlist = res.data.userlist
                         this.pagination.total = res.data.total
                     })
                 }
             }

         })


  </script>


</body>
</html>